<template>
  <uni-nav-bar
    id="navbar-id"
    :background-color="props.bgColor"
    :border="props.border"
    :height="props.height"
    :icon-color="props.iconColor"
    :left-width="props.leftShow ? '20%' : '0'"
    :right-width="props.leftShow ? '20%' : '0'"
    :title="props.title"
    fixed
    left-icon="back"
    status-bar
    @clickLeft="clickLeft"
  >
    <view v-if="props.bgShow" class="nav-bar-bg">
      <image class="nav-bar-img" mode="aspectFill" src="@/assets/images/bg.png"></image>
    </view>
    <slot>
      <view class="nav-bar-title">{{ props.title }}</view>
    </slot>
  </uni-nav-bar>
</template>

<script setup>
import { onMounted } from 'vue';
import { useStore } from '@/store';

const props = defineProps({
  title: {
    type: String,
    default: 'title'
  },
  border: {
    type: Boolean,
    default: false
  },
  bgShow: {
    type: Boolean,
    default: false
  },
  bgColor: {
    type: String,
    default: '#ffffff'
  },
  height: {
    type: Number,
    default: 44
  },
  leftShow: {
    type: Boolean,
    default: true
  },
  iconColor: {
    type: String,
    default: '#000000'
  }
});
const store = useStore();

onMounted(() => {
  if (!store.navbarConfig || !store.navbarConfig.hasOwnProperty('height')) {
    getHeight();
  }
});

// 保存导航栏高度
const getHeight = async () => {
  const systemInfo = uni.getSystemInfoSync();
  const statusBarHeight = systemInfo.statusBarHeight || 0;
  let navigationBarHeight = 0;
  navigationBarHeight = systemInfo.platform === 'ios' ? 44 : 48;
  store.getNavbar({ height: statusBarHeight + navigationBarHeight });
};

// 左侧返回图标
const clickLeft = () => {
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.nav-bar-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .nav-bar-img {
    width: 100%;
    height: 600rpx;
  }
}

.left-icon {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: left;
  padding: 20rpx 0;
}

.nav-bar-title {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: 34rpx;
  color: #000;
}
</style>
